<!--文章内容-->
<template>
  <div>
    <main>
      <section class="article py-5">
        <div class="container">
          <!--文章标题-->
          <h2 class="article-title text-center " style="font-weight: 600">{{title}}</h2>
          <div class="row">
            <div class="col-lg-6 py-3">
              <img class="article-author-profile-img" src="../../static/img/dl2.jpg" alt="">
              <span class="px-2">{{author}}</span>
              <span class="px-2">发布时间：{{time}}</span>
            </div>
            <div class="col-lg-6 py-3">
              <div style="float: right;margin-top: 10px">
                <span class="px-2 mt-3">收藏：<span class="text-primary">{{collection}}</span></span>
                <span class="px-2 mt-3">赞： <span class="text-primary">{{like}}</span></span>
                <span class="px-2 mt-3">围观： <span class="text-primary">{{read}}</span></span>
              </div>
            </div>
          </div>

          <!--  文章内容  -->
          <div class="article-content pb-3" v-html="content">
          </div>


          <div class="mt-3 clearfix">
            <!-- 标签 -->
            <div class="article-tag float-left pt-1">
              <span class="article-tag-content">标签：</span>
              <div class="article-tag-icon d-inline-block text-center" v-for="item in tag">{{item}}</div>
            </div>

            <div class="article-interaction float-right">
              <!-- 点赞  -->
              <div class="article-like float-left" v-if="isLike == false">
                <button @click="addLikeBtn()">
                  <i class="zi zi_digg"></i>
                  <span>点赞</span>
                </button>
              </div>

              <!-- 点赞  -->
              <div class="article-like float-left" v-if="isLike == true">
                <button @click="removeLikeBtn()">
                 <i class="zi zi_thumbsup"></i>
                  <span>取消点赞</span>
                </button>
              </div>

              <!-- 收藏 -->
              <div class="article-collect mx-2 float-left" v-if="isCollect == false">
                <button @click="addCollectBtn()">
                  <i class="zi zi_love"></i>
                  <span>收藏</span>
                </button>
              </div>

              <!-- 收藏 -->
              <div class="article-collect mx-2 float-left" v-if="isCollect == true">
                <button @click="removeCollectBtn()">
                  <i class="zi zi_starHalfBlack"></i>
                  <span>取消收藏</span>
                </button>
              </div>


              <!-- 分享 -->
              <div class="article-collect mx-2 float-left">
                <a href="#">
                  <i class="zi zi_sharealt"></i>
                  <span>分享</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <Comment></Comment>
    </main>
  </div>
</template>
<!--  -->


<script>
  import Comment from '../components/jsw/Comment.vue'
  //获取url中的参数

  export default {
    components: {
      Comment
    },
    name: "articleContent",
    data() {
      return {
        title: '', // 文章标题
        author: '', // 作者名称
        time: '', // 文章发表时间
        like: '', // 文章点赞
        collection: '', // 文章收藏
        commentCounts: '', // 文章评论数量
        read: '',
        tag: '',
        id: '', // 当前文章id
        content: '', // 文章内容
        currentArticleId: this.id, // 将文章id传入评论组件
        uid: '', // 用户id
        isCollect: '', // 是否收藏
        isLike: '', // 是否点赞
      }
    },
    methods: {
      // 点赞按钮
      addLikeBtn() {
        if (this.uid == null) {
          alert("请登录");
          return;
        }
        this.axios.get('http://localhost:9000/article/addLike/' + this.id + "/" + this.uid).then((resp) => {
          this.isLike = true;
          console.log(resp);
          let data = resp.data;
          this.like = data.num;
        })
      },
      // 取消点赞
      removeLikeBtn() {
        this.axios.get('http://localhost:9000/article/removeLike/' + this.id + "/" + this.uid).then((resp) => {
          this.isLike = false;
          // console.log(resp.data);
          let data = resp.data;
          this.like = data.num;
        })
      },
      // 添加收藏
      addCollectBtn() {
        if (this.uid == null) {
          alert("请登录");
          return;
        }
        this.axios.get('http://localhost:9000/article/addCollect/' + this.id + "/" + this.uid).then((resp) => {
          this.isCollect = true;
          console.log(resp);
          let data = resp.data;
          this.collection = data.num;
          
        })
      },
      // 取消收藏
      removeCollectBtn() {
        this.axios.get('http://localhost:9000/article/removeCollect/' + this.id + "/" + this.uid).then((resp) => {
          this.isCollect = false; 
          let data = resp.data;
          this.collection = data.num;
        })
      },
    },
    beforeMount: function() {
      // 获取文章id
      this.id = this.$route.params.articleid;
      this.uid = window.sessionStorage.getItem("userId");
    },

    mounted: function() {
      let that = this;
      // 未登录用户
      if (this.uid == null) {
           this.axios.get('http://localhost:9000/article/findArticle/' + this.id).then((res) => {
           console.log("未登录用户");
             art(res);
             that.isCollect = false;
             that.isLike = false;
           })
      } else { // 登录用户
         this.axios.get('http://localhost:9000/article/findArticle/' + this.id + "/" + this.uid).then((res) => {
           console.log("登录用户");
            art(res);
            that.isCollect = res.data.data.isCollect;
            that.isLike = res.data.data.isLike;
         })
      }

      // console.log(resp);
      function art(resp){
        // console.log(resp);
        let email = sessionStorage.getItem("userEmail");
        let user = sessionStorage.getItem("userId");
        // console.log(resp.data);
        let article = resp.data.data.article;
        // console.log(article);
        that.title = article.articleTitle; // 文章标题
        that.author = article.userName; // 名称
        that.time = article.articleTime; // 文章发表时间
        that.like = article.articleLike; // 文章点赞
        that.collection = article.articleCollection; //文章收藏
        that.commentCounts = article.articleCommentCounts; //文章评论
        that.read = article.articleRead; // 文章阅读量
        let tag =  article.articleLable; // 文章标签
        that.tag = tag.split(","); // 标签
        let details = resp.data.data.articleContent;
        that.content = details.content; 
      }
    }
  }

</script>

<style scoped>

  i {
    font-size: 30px;
  }

  .xiao {
    font-size: 20px;
  }

  .article-category {
    margin-left: 10px;
  }

  .article-tag {
    margin-left: 10px;
  }

  .article-author {
    margin-left: 10px;
  }

  .article-entry {
    padding-top: 10px;
    padding-bottom: 10px;
    word-break: break-all;
  }

  .changeHoverColor:hover {
    color: deepskyblue;
  }

  .article-category-link:hover {
    color: deepskyblue;
  }

  .article-footer div div {
    margin-right: 20px;
  }

  .article-reads {
    margin-top: 10px;
  }

  .comment-top {
    margin-top: 20px;
    margin-bottom: 5px;
  }

  .comment-top-input {
    width: 80%;
    height: 100px;
    resize: none;
    word-break: break-all;
    margin: 0 50px;
  }

  /*评论提价按钮*/
  .comment-submit {
    margin-right: 30px;
  }

  /*所有评论*/
  .comment-bottom {
    margin-top: 50px;
  }

  .article-comment-top {
    margin-bottom: 30px;
  }

  .article-comment-word {
    font-size: 30px;
    /*border:3px solid #0f6674;*/
  }

  /*评论的细节*/
  .visitorComment {
    margin-top: 20px;
    /*border-bottom: 1px solid black;*/
  }

  .visitorComment-content {
    margin-left: 10px;
    /*border: 3px solid black;*/
  }

  .visitorInfo {
    margin-top: 10px;
    /*border: 3px solid red;*/
  }

  .visitorFloor {
    margin-left: 10px;
  }

  /*评论人头像*/
  .visitorCommentImg {
    width: 64px;
    height: 64px;
  }

  /*评论内容*/
  .visitorSay {
    margin-top: 10px;
  }

  .tool-group {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .tool-group a {
    margin-right: 10px;
  }

  a {
    color: black;
  }

  .sub-comment {
    border-left: 3px solid grey;
  }

  a {
    text-decoration: none;
  }


  /*文章内容*/
  .article-content {
    border: 5px solid #E4E4E4;
    border-radius: 3px;
    box-shadow: 0 0 15px #E4E4E4;
    padding: 10px
  }

  /*标签*/
  .article-tag {
    font-size: 20px;
  }

  /*标签图标*/
  .article-tag-icon {
    background: deepskyblue;
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 7px;
    color: white;
  }

  .comment-title {
    font-size: 18px;
  }


</style>



